<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行业务管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        danger: '#F87272',
                        warning: '#FBBD23',
                        info: '#3ABFF8',
                        dark: '#3D4451',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .nav-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="header">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-bank text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">银行业务管理系统</h1>
            </div>
            
            <div class="flex items-center space-x-6">
                <div class="hidden md:flex items-center space-x-4">
                    <button id="adminModeBtn" class="px-4 py-2 rounded-md text-primary bg-primary/10 hover:bg-primary/20 transition-colors">
                        <i class="fa fa-user-secret mr-2"></i>管理员模式
                    </button>
                    <button id="customerModeBtn" class="px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100 transition-colors">
                        <i class="fa fa-user mr-2"></i>客户模式
                    </button>
                </div>
                
                <div class="relative">
                    <button class="flex items-center space-x-2 focus:outline-none">
                        <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:inline font-medium">管理员</span>
                        <i class="fa fa-chevron-down text-xs"></i>
                    </button>
                </div>
                
                <button class="md:hidden text-gray-600 focus:outline-none" id="mobileMenuBtn">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 transform translate-x-full transition-transform duration-300 md:hidden">
        <div class="bg-white h-full w-64 shadow-lg p-4">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">菜单</h3>
                <button id="closeMobileMenuBtn" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <nav class="space-y-2">
                <button class="w-full text-left px-4 py-2 rounded-md text-primary bg-primary/10">
                    <i class="fa fa-user-secret mr-2"></i>管理员模式
                </button>
                <button class="w-full text-left px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100">
                    <i class="fa fa-user mr-2"></i>客户模式
                </button>
                <div class="border-t border-gray-200 my-3"></div>
                <button class="w-full text-left px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100">
                    <i class="fa fa-cog mr-2"></i>系统设置
                </button>
                <button class="w-full text-left px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100">
                    <i class="fa fa-question-circle mr-2"></i>帮助中心
                </button>
                <button class="w-full text-left px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100">
                    <i class="fa fa-sign-out mr-2"></i>退出登录
                </button>
            </nav>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="flex flex-1 pt-16">
        <!-- 侧边栏导航 -->
        <aside id="sidebar" class="fixed md:relative w-64 bg-white shadow-md h-full z-30 transform -translate-x-full md:translate-x-0 transition-transform duration-300" id="sidebar">
            <nav class="p-4 space-y-1">
                <div class="mb-4">
                    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">管理员菜单</h2>
                </div>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 nav-active" data-target="customerManagement">
                    <i class="fa fa-users w-5 text-center"></i>
                    <span>客户管理</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="cardManagement">
                    <i class="fa fa-credit-card w-5 text-center"></i>
                    <span>银行卡管理</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="savingManagement">
                    <i class="fa fa-money w-5 text-center"></i>
                    <span>存款业务管理</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="transactionManagement">
                    <i class="fa fa-exchange w-5 text-center"></i>
                    <span>交易记录管理</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="reportExport" id="reportExportBtn">
                    <i class="fa fa-bar-chart w-5 text-center"></i>
                    <span>报表导出</span>
                </button>
                
                <div class="border-t border-gray-200 my-3"></div>
                
                <div class="mb-4">
                    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">客户菜单</h2>
                </div>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="balanceQuery">
                    <i class="fa fa-search w-5 text-center"></i>
                    <span>余额查询</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="transactionQuery">
                    <i class="fa fa-history w-5 text-center"></i>
                    <span>交易查询</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="deposit">
                    <i class="fa fa-plus-circle w-5 text-center"></i>
                    <span>存款</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="withdraw">
                    <i class="fa fa-minus-circle w-5 text-center"></i>
                    <span>取款</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="reportCard">
                    <i class="fa fa-warning w-5 text-center"></i>
                    <span>挂失/解挂</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="changePassword">
                    <i class="fa fa-key w-5 text-center"></i>
                    <span>修改密码</span>
                </button>
                
                <button class="nav-item w-full text-left px-4 py-2 rounded-md flex items-center space-x-3 hover:bg-gray-100 transition-colors" data-target="transfer">
                    <i class="fa fa-exchange w-5 text-center"></i>
                    <span>转账</span>
                </button>
            </nav>
        </aside>

        <!-- 主内容 -->
        <main class="flex-1 p-6 overflow-auto">
            <div class="container mx-auto">
                <!-- 控制面板 -->
                <div class="mb-6 fade-in">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                        <div>
                            <h2 class="text-2xl font-bold text-gray-800" id="pageTitle">客户管理</h2>
                            <p class="text-gray-500 mt-1" id="pageDescription">管理系统中的所有客户信息</p>
                        </div>
                        <div class="mt-4 md:mt-0">
                            <button id="addNewBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center space-x-2 shadow-md hover:shadow-lg">
                                <i class="fa fa-plus"></i>
                                <span>新增客户</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 统计卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="bg-white rounded-lg shadow-md p-5 hover-scale">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="text-gray-500 text-sm">客户总数</p>
                                    <h3 class="text-2xl font-bold mt-1" id="totalCustomers">0</h3>
                                    <p class="text-green-500 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 12%
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-users"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-5 hover-scale">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="text-gray-500 text-sm">银行卡总数</p>
                                    <h3 class="text-2xl font-bold mt-1" id="totalCards">0</h3>
                                    <p class="text-green-500 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8%
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                    <i class="fa fa-credit-card"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-5 hover-scale">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="text-gray-500 text-sm">存款业务</p>
                                    <h3 class="text-2xl font-bold mt-1" id="totalSavings">0</h3>
                                    <p class="text-gray-500 text-sm mt-2 flex items-center">
                                        <i class="fa fa-minus mr-1"></i> 较上月持平
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-info/10 flex items-center justify-center text-info">
                                    <i class="fa fa-money"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-5 hover-scale">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="text-gray-500 text-sm">今日交易</p>
                                    <h3 class="text-2xl font-bold mt-1" id="totalTransactions">0</h3>
                                    <p class="text-red-500 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-down mr-1"></i> 较昨日下降 3%
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                                    <i class="fa fa-exchange"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 内容区域 -->
                <div class="bg-white rounded-lg shadow-md p-5 fade-in">
                    <!-- 搜索和筛选 -->
                    <div class="mb-6" id="searchPanel">
                        <div class="flex flex-col md:flex-row gap-4">
                            <div class="flex-1">
                                <div class="relative">
                                    <input type="text" id="searchInput" placeholder="搜索客户姓名、身份证号..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <button id="searchBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center space-x-1 shadow hover:shadow-md">
                                    <i class="fa fa-search"></i>
                                    <span>搜索</span>
                                </button>
                                <button id="resetBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center space-x-1">
                                    <i class="fa fa-refresh"></i>
                                    <span>重置</span>
                                </button>
                                <button id="exportCsvBtn" class="px-4 py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors flex items-center space-x-1 shadow hover:shadow-md" style="display: none;">
                                    <i class="fa fa-download"></i>
                                    <span>导出CSV</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据表格 -->
                    <div class="overflow-x-auto" id="dataTableContainer">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3">交易时间</th>
                                    <th class="px-6 py-3">交易类型</th>
                                    <th class="px-6 py-3">卡号</th>
                                    <th class="px-6 py-3">金额</th>
                                    <th class="px-6 py-3">备注</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="dataTable">
                                <!-- 数据将通过JavaScript动态加载 -->
                                <tr class="animate-pulse">
                                    <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                                        <i class="fa fa-spinner fa-spin mr-2"></i>加载数据中...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="flex justify-between items-center mt-6" id="paginationContainer">
                        <div class="text-sm text-gray-500">
                            显示 <span id="startIndex">0</span>-<span id="endIndex">0</span> 条，共 <span id="totalItems">0</span> 条
                        </div>
                        <div class="flex space-x-1">
                            <button id="prevPage" class="px-3 py-1 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                                <i class="fa fa-chevron-left"></i>
                            </button>
                            <div id="pageNumbers" class="flex space-x-1">
                                <!-- 页码将通过JavaScript动态生成 -->
                            </div>
                            <button id="nextPage" class="px-3 py-1 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-auto transform scale-95 transition-transform duration-300" id="modalContent">
            <div class="p-5 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-xl font-bold text-gray-800" id="modalTitle">新增客户</h3>
                <button id="closeModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="p-5" id="modalBody">
                <!-- 表单内容将通过JavaScript动态生成 -->
            </div>
            
            <div class="p-5 border-t border-gray-200 flex justify-end space-x-3">
                <button id="cancelModal" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="submitModal" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md">
                    保存
                </button>
            </div>
        </div>
    </div>

    <!-- 提示消息 -->
    <div id="toast" class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-4 transform translate-y-16 opacity-0 transition-all duration-300 flex items-center space-x-3 max-w-xs z-50">
        <div id="toastIcon" class="w-8 h-8 rounded-full flex items-center justify-center">
            <i class="fa fa-check text-white"></i>
        </div>
        <div>
            <h4 id="toastTitle" class="font-medium text-gray-800">操作成功</h4>
            <p id="toastMessage" class="text-sm text-gray-600">数据已成功保存</p>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 全局变量
        let currentPage = 1;
        let totalPages = 1;
        let currentModule = 'customerManagement';
        let currentData = [];
        let modalData = null;
        
        // API配置
        const API_BASE_URL = 'http://localhost:3000/api';
        
        // DOM元素
        const sidebar = document.getElementById('sidebar');
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const closeMobileMenuBtn = document.getElementById('closeMobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const modal = document.getElementById('modal');
        const modalContent = document.getElementById('modalContent');
        const modalTitle = document.getElementById('modalTitle');
        const modalBody = document.getElementById('modalBody');
        const closeModal = document.getElementById('closeModal');
        const cancelModal = document.getElementById('cancelModal');
        const submitModal = document.getElementById('submitModal');
        const toast = document.getElementById('toast');
        const toastIcon = document.getElementById('toastIcon');
        const toastTitle = document.getElementById('toastTitle');
        const toastMessage = document.getElementById('toastMessage');
        const header = document.getElementById('header');
        const navItems = document.querySelectorAll('.nav-item');
        const addNewBtn = document.getElementById('addNewBtn');
        const searchPanel = document.getElementById('searchPanel');
        const searchInput = document.getElementById('searchInput');
        const searchBtn = document.getElementById('searchBtn');
        const resetBtn = document.getElementById('resetBtn');
        const exportCsvBtn = document.getElementById('exportCsvBtn');
        const dataTable = document.getElementById('dataTable');
        const pageTitle = document.getElementById('pageTitle');
        const pageDescription = document.getElementById('pageDescription');
        const paginationContainer = document.getElementById('paginationContainer');
        const pageNumbers = document.getElementById('pageNumbers');
        const prevPage = document.getElementById('prevPage');
        const nextPage = document.getElementById('nextPage');
        const startIndex = document.getElementById('startIndex');
        const endIndex = document.getElementById('endIndex');
        const totalItems = document.getElementById('totalItems');
        const totalCustomers = document.getElementById('totalCustomers');
        const totalCards = document.getElementById('totalCards');
        const totalSavings = document.getElementById('totalSavings');
        const totalTransactions = document.getElementById('totalTransactions');
        const adminModeBtn = document.getElementById('adminModeBtn');
        const customerModeBtn = document.getElementById('customerModeBtn');
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 加载统计数据
            loadStatistics();
            
            // 加载默认模块数据
            loadModuleData(currentModule);
            
            // 绑定事件监听器
            bindEventListeners();
            
            // 滚动时调整导航栏样式
            window.addEventListener('scroll', () => {
                if (window.scrollY > 10) {
                    header.classList.add('py-2');
                    header.classList.remove('py-3');
                } else {
                    header.classList.add('py-3');
                    header.classList.remove('py-2');
                }
            });
        });
        
        // 绑定事件监听器
        function bindEventListeners() {
            // 移动端菜单
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.remove('translate-x-full');
            });
            
            closeMobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.add('translate-x-full');
            });
            
            // 侧边栏导航
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有活动状态
                    navItems.forEach(navItem => {
                        navItem.classList.remove('nav-active');
                    });
                    
                    // 添加当前活动状态
                    item.classList.add('nav-active');
                    
                    // 关闭移动端菜单
                    mobileMenu.classList.add('translate-x-full');
                    
                    // 加载对应模块数据
                    currentModule = item.dataset.target;
                    currentPage = 1;
                    loadModuleData(currentModule);
                    
                    // 更新页面标题和描述
                    updatePageInfo(currentModule);
                    
                    // 更新添加按钮文本
                    updateAddButtonText(currentModule);
                    
                    // 更新搜索面板
                    updateSearchPanel(currentModule);
                });
            });
            
            // 模态框操作
            closeModal.addEventListener('click', closeModalDialog);
            cancelModal.addEventListener('click', closeModalDialog);
            submitModal.addEventListener('click', submitModalForm);
            
            // 分页控制
            prevPage.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    loadModuleData(currentModule);
                }
            });
            
            nextPage.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    loadModuleData(currentModule);
                }
            });
            
            // 搜索和重置
            searchBtn.addEventListener('click', () => {
                currentPage = 1;
                loadModuleData(currentModule);
            });
            
            resetBtn.addEventListener('click', () => {
                searchInput.value = '';
                currentPage = 1;
                loadModuleData(currentModule);
            });

            exportCsvBtn.addEventListener('click', () => {
                exportDataAsCsv(currentModule);
            });
            
            // 管理员/客户模式切换
            adminModeBtn.addEventListener('click', () => {
                // 高亮管理员模式按钮
                adminModeBtn.classList.add('bg-primary/10', 'text-primary');
                adminModeBtn.classList.remove('text-gray-600');
                
                // 取消高亮客户模式按钮
                customerModeBtn.classList.remove('bg-primary/10', 'text-primary');
                customerModeBtn.classList.add('text-gray-600');
                
                // 显示管理员菜单
                document.querySelectorAll('.nav-item').forEach(item => {
                    if (item.dataset.target.startsWith('customer') || 
                        item.dataset.target.startsWith('card') || 
                        item.dataset.target.startsWith('saving') || 
                        item.dataset.target.startsWith('transaction')) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 加载默认管理员模块
                currentModule = 'customerManagement';
                currentPage = 1;
                loadModuleData(currentModule);
                updatePageInfo(currentModule);
                updateAddButtonText(currentModule);
                updateSearchPanel(currentModule);
                
                // 更新导航栏状态
                navItems.forEach(item => {
                    item.classList.remove('nav-active');
                    if (item.dataset.target === 'customerManagement') {
                        item.classList.add('nav-active');
                    }
                });
            });
            
            customerModeBtn.addEventListener('click', () => {
                // 高亮客户模式按钮
                customerModeBtn.classList.add('bg-primary/10', 'text-primary');
                customerModeBtn.classList.remove('text-gray-600');
                
                // 取消高亮管理员模式按钮
                adminModeBtn.classList.remove('bg-primary/10', 'text-primary');
                adminModeBtn.classList.add('text-gray-600');
                
                // 显示客户菜单
                document.querySelectorAll('.nav-item').forEach(item => {
                    if (item.dataset.target.startsWith('balance') || 
                        item.dataset.target.startsWith('transactionQuery') || 
                        item.dataset.target.startsWith('deposit') || 
                        item.dataset.target.startsWith('withdraw') || 
                        item.dataset.target.startsWith('reportCard') || 
                        item.dataset.target.startsWith('changePassword')) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 加载默认客户模块
                currentModule = 'balanceQuery';
                currentPage = 1;
                loadModuleData(currentModule);
                updatePageInfo(currentModule);
                updateAddButtonText(currentModule);
                updateSearchPanel(currentModule);
                
                // 更新导航栏状态
                navItems.forEach(item => {
                    item.classList.remove('nav-active');
                    if (item.dataset.target === 'balanceQuery') {
                        item.classList.add('nav-active');
                    }
                });
            });
            
            // 添加新按钮点击事件
            addNewBtn.addEventListener('click', () => {
                openAddModal(currentModule);
            });

            // 使用事件委托处理动态生成的按钮
            dataTable.addEventListener('click', (e) => {
                const target = e.target.closest('.edit-btn, .delete-btn');
                if (!target) return;

                const id = target.dataset.id;
                const type = target.dataset.type;

                if (target.classList.contains('edit-btn')) {
                    openEditModal(type + 'Management', id);
                } else if (target.classList.contains('delete-btn')) {
                    deleteItem(type + 'Management', id);
                }
            });

            // 绑定报表导出按钮
            document.getElementById('reportExportBtn').addEventListener('click', () => {
                // 切换高亮
                navItems.forEach(item => item.classList.remove('nav-active'));
                document.getElementById('reportExportBtn').classList.add('nav-active');
                // 渲染报表导出表单
                currentModule = 'reportExport';
                renderReportExportForm();
                pageTitle.textContent = '报表导出';
                pageDescription.textContent = '导出银行卡月交易额、月末汇总等统计报表';
                addNewBtn.style.display = 'none';
                searchPanel.style.display = 'none';
                paginationContainer.style.display = 'none';
            });
        }
        
        // 更新页面标题和描述
        function updatePageInfo(module) {
            switch(module) {
                case 'customerManagement':
                    pageTitle.textContent = '客户管理';
                    pageDescription.textContent = '管理系统中的所有客户信息';
                    break;
                case 'cardManagement':
                    pageTitle.textContent = '银行卡管理';
                    pageDescription.textContent = '管理系统中的所有银行卡信息';
                    break;
                case 'savingManagement':
                    pageTitle.textContent = '存款业务管理';
                    pageDescription.textContent = '管理系统中的所有存款业务';
                    break;
                case 'transactionManagement':
                    pageTitle.textContent = '交易记录管理';
                    pageDescription.textContent = '查看系统中的所有交易记录';
                    break;
                case 'balanceQuery':
                    pageTitle.textContent = '余额查询';
                    pageDescription.textContent = '查询银行卡余额';
                    break;
                case 'transactionQuery':
                    pageTitle.textContent = '交易查询';
                    pageDescription.textContent = '查询银行卡交易记录';
                    break;
                case 'deposit':
                    pageTitle.textContent = '存款';
                    pageDescription.textContent = '进行存款操作';
                    break;
                case 'withdraw':
                    pageTitle.textContent = '取款';
                    pageDescription.textContent = '进行取款操作';
                    break;
                case 'reportCard':
                    pageTitle.textContent = '挂失/解挂';
                    pageDescription.textContent = '管理银行卡挂失状态';
                    break;
                case 'changePassword':
                    pageTitle.textContent = '修改密码';
                    pageDescription.textContent = '修改银行卡密码';
                    break;
            }
        }
        
        // 更新添加按钮文本
        function updateAddButtonText(module) {
            if (module === 'customerManagement') {
                addNewBtn.innerHTML = '<i class="fa fa-plus"></i><span>新增客户</span>';
                addNewBtn.style.display = 'flex';
            } else if (module === 'cardManagement') {
                addNewBtn.innerHTML = '<i class="fa fa-plus"></i><span>新增银行卡</span>';
                addNewBtn.style.display = 'flex';
            } else if (module === 'savingManagement') {
                addNewBtn.innerHTML = '<i class="fa fa-plus"></i><span>新增存款业务</span>';
                addNewBtn.style.display = 'flex';
            } else {
                addNewBtn.style.display = 'none';
            }
        }
        
        // 更新搜索面板
        function updateSearchPanel(module) {
            const managementModules = ['customerManagement', 'cardManagement', 'savingManagement', 'transactionManagement'];
            const canSearch = managementModules.includes(module) || module === 'transactionQuery';
            
            if (canSearch) {
                searchPanel.style.display = 'block';
            } else {
                searchPanel.style.display = 'none';
            }

            if (managementModules.includes(module)) {
                exportCsvBtn.style.display = 'flex';
            } else {
                exportCsvBtn.style.display = 'none';
            }

            switch(module) {
                case 'customerManagement':
                    searchInput.placeholder = '搜索客户姓名、身份证号...';
                    break;
                case 'cardManagement':
                    searchInput.placeholder = '搜索卡号、客户姓名...';
                    break;
                case 'savingManagement':
                    searchInput.placeholder = '搜索业务名称、利率...';
                    break;
                case 'transactionManagement':
                    searchInput.placeholder = '搜索卡号、交易类型...';
                    break;
                case 'transactionQuery':
                    searchInput.placeholder = '搜索交易类型、金额...';
                    break;
            }
        }
        
        // 加载统计数据
        async function loadStatistics() {
            try {
                // 获取客户总数
                const customersResponse = await fetch(`${API_BASE_URL}/customers`);
                const customersData = await customersResponse.json();
                totalCustomers.textContent = customersData.total || 0;
                
                // 获取银行卡总数
                const cardsResponse = await fetch(`${API_BASE_URL}/cards`);
                const cardsData = await cardsResponse.json();
                totalCards.textContent = cardsData.total || 0;
                
                // 获取存款业务总数
                const savingsResponse = await fetch(`${API_BASE_URL}/savings`);
                const savingsData = await savingsResponse.json();
                totalSavings.textContent = savingsData.total || 0;
                
                // 获取今日交易数
                const today = new Date().toISOString().split('T')[0];
                const transactionsResponse = await fetch(`${API_BASE_URL}/transactions?tradeDate=${today}`);
                const transactionsData = await transactionsResponse.json();
                totalTransactions.textContent = transactionsData.total || 0;
                
            } catch (error) {
                showToast('错误', '获取统计数据失败', 'error');
                console.error('获取统计数据失败:', error);
            }
        }
        
        // 导出数据为CSV
        async function exportDataAsCsv(module) {
            let endpoint = '';
            let filename = 'export.csv';
            const searchTerm = searchInput.value.trim();

            switch(module) {
                case 'customerManagement':
                    endpoint = 'customers/export';
                    filename = 'customers.csv';
                    break;
                case 'cardManagement':
                    endpoint = 'cards/export';
                    filename = 'cards.csv';
                    break;
                case 'savingManagement':
                    endpoint = 'savings/export';
                    filename = 'savings.csv';
                    break;
                case 'transactionManagement':
                    endpoint = 'transactions/export';
                    filename = 'transactions.csv';
                    break;
                default:
                    showToast('提示', '当前模块不支持导出', 'warning');
                    return;
            }

            let url = `${API_BASE_URL}/${endpoint}`;
            if (searchTerm) {
                url += `?q=${encodeURIComponent(searchTerm)}`;
            }

            try {
                const response = await fetch(url);
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '导出失败');
                }
                const blob = await response.blob();
                const downloadUrl = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = downloadUrl;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(downloadUrl);
                a.remove();
                showToast('成功', '数据已开始导出', 'success');
            } catch (error) {
                showToast('错误', `导出数据失败: ${error.message}`, 'error');
                console.error('导出CSV失败:', error);
            }
        }
        
        // 加载模块数据
        async function loadModuleData(module) {
            try {
                let url, response, data;
                let searchTerm = searchInput.value.trim();
                
                // 显示加载状态
                dataTable.innerHTML = `
                    <tr class="animate-pulse">
                        <td colspan="10" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-2"></i>加载数据中...
                        </td>
                    </tr>
                `;
                
                switch(module) {
                    case 'customerManagement':
                        url = `${API_BASE_URL}/customers?page=${currentPage}&pageSize=10`;
                        if (searchTerm) {
                            url += `&q=${searchTerm}`;
                        }
                        response = await fetch(url);
                        data = await response.json();
                        renderCustomerTable(data.data);
                        updatePagination(data.total, 10);
                        break;
                        
                    case 'cardManagement':
                        url = `${API_BASE_URL}/cards?page=${currentPage}&pageSize=10`;
                        if (searchTerm) {
                            url += `&q=${searchTerm}`;
                        }
                        response = await fetch(url);
                        data = await response.json();
                        renderCardTable(data.data);
                        updatePagination(data.total, 10);
                        break;
                        
                    case 'savingManagement':
                        url = `${API_BASE_URL}/savings?page=${currentPage}&pageSize=10`;
                        if (searchTerm) {
                            url += `&q=${searchTerm}`;
                        }
                        response = await fetch(url);
                        data = await response.json();
                        renderSavingTable(data.data);
                        updatePagination(data.total, 10);
                        break;
                        
                    case 'transactionManagement':
                        url = `${API_BASE_URL}/transactions?page=${currentPage}&pageSize=10`;
                        if (searchTerm) {
                            url += `&q=${searchTerm}`;
                        }
                        response = await fetch(url);
                        data = await response.json();
                        renderTransactionTable(data.data);
                        updatePagination(data.total, 10);
                        break;
                        
                    case 'balanceQuery':
                        renderBalanceQueryForm();
                        paginationContainer.style.display = 'none';
                        break;
                        
                    case 'transactionQuery':
                        renderTransactionQueryForm();
                        paginationContainer.style.display = 'none';
                        break;
                        
                    case 'deposit':
                        renderDepositForm();
                        paginationContainer.style.display = 'none';
                        break;
                        
                    case 'withdraw':
                        renderWithdrawForm();
                        paginationContainer.style.display = 'none';
                        break;
                        
                    case 'reportCard':
                        renderReportCardForm();
                        paginationContainer.style.display = 'none';
                        break;
                        
                    case 'changePassword':
                        renderChangePasswordForm();
                        paginationContainer.style.display = 'none';
                        break;
                    case 'reportExport':
                        renderReportExportForm();
                        paginationContainer.style.display = 'none';
                        break;
                    case 'transfer':
                        renderTransferForm();
                        paginationContainer.style.display = 'none';
                        break;
                }
                
                currentData = data?.data || [];
                
            } catch (error) {
                showToast('错误', '加载数据失败', 'error');
                console.error('加载数据失败:', error);
            }
        }
        
        // 动态设置表头
        function setTableHeader(headerHtml) {
            document.querySelector("#dataTableContainer thead").innerHTML = headerHtml;
        }
        
        // 渲染客户表格
        function renderCustomerTable(customers) {
            setTableHeader(`
                <tr>
                    <th class="px-6 py-3">客户ID</th>
                    <th class="px-6 py-3">姓名</th>
                    <th class="px-6 py-3">身份证号</th>
                    <th class="px-6 py-3">电话</th>
                    <th class="px-6 py-3">地址</th>
                    <th class="px-6 py-3">操作</th>
                </tr>
            `);
            if (!customers || customers.length === 0) {
                dataTable.innerHTML = `
                    <tr>
                        <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-search mr-2"></i>未找到客户数据
                        </td>
                    </tr>
                `;
                return;
            }
            dataTable.innerHTML = customers.map(customer => `
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">${customer.customerID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${customer.customerName}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${customer.PID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${customer.telephone}</td>
                    <td class="px-6 py-4">${customer.address}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button class="text-primary hover:text-primary/80 mr-3 edit-btn" data-id="${customer.customerID}" data-type="customer">
                            <i class="fa fa-edit"></i> 编辑
                        </button>
                        <button class="text-danger hover:text-danger/80 delete-btn" data-id="${customer.customerID}" data-type="customer">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                </tr>
            `).join('');
        }
        
        // 渲染银行卡表格
        function renderCardTable(cards) {
            setTableHeader(`
                <tr>
                    <th class="px-6 py-3">卡号</th>
                    <th class="px-6 py-3">币种</th>
                    <th class="px-6 py-3">存款类型ID</th>
                    <th class="px-6 py-3">开卡日期</th>
                    <th class="px-6 py-3">开卡金额</th>
                    <th class="px-6 py-3">余额</th>
                    <th class="px-6 py-3">取款密码</th>
                    <th class="px-6 py-3">挂失状态</th>
                    <th class="px-6 py-3">客户ID</th>
                    <th class="px-6 py-3">操作</th>
                </tr>
            `);
            if (!cards || cards.length === 0) {
                dataTable.innerHTML = `
                    <tr>
                        <td colspan="10" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-search mr-2"></i>未找到银行卡数据
                        </td>
                    </tr>
                `;
                return;
            }
            dataTable.innerHTML = cards.map(card => `
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">${card.cardID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.curID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.savingID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.openDate ? new Date(card.openDate).toLocaleString() : ''}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.openMoney}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.balance}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.pass}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.IsReportLoss}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${card.customerID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button class="text-primary hover:text-primary/80 mr-3 edit-btn" data-id="${card.cardID}" data-type="card">
                            <i class="fa fa-edit"></i> 编辑
                        </button>
                        <button class="text-danger hover:text-danger/80 delete-btn" data-id="${card.cardID}" data-type="card">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                </tr>
            `).join('');
        }
        
        // 渲染存款业务表格
        function renderSavingTable(savings) {
            setTableHeader(`
                <tr>
                    <th class="px-6 py-3">业务ID</th>
                    <th class="px-6 py-3">业务名称</th>
                    <th class="px-6 py-3">业务描述</th>
                    <th class="px-6 py-3">操作</th>
                </tr>
            `);
            if (!savings || savings.length === 0) {
                dataTable.innerHTML = `
                    <tr>
                        <td colspan="4" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-search mr-2"></i>未找到存款业务数据
                        </td>
                    </tr>
                `;
                return;
            }
            dataTable.innerHTML = savings.map(saving => `
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">${saving.savingID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${saving.savingName}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${saving.description || ''}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button class="text-primary hover:text-primary/80 mr-3 edit-btn" data-id="${saving.savingID}" data-type="saving">
                            <i class="fa fa-edit"></i> 编辑
                        </button>
                        <button class="text-danger hover:text-danger/80 delete-btn" data-id="${saving.savingID}" data-type="saving">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                </tr>
            `).join('');
        }
        
        // 渲染交易记录表格
        function renderTransactionTable(transactions) {
            setTableHeader(`
                <tr>
                    <th class="px-6 py-3">交易时间</th>
                    <th class="px-6 py-3">交易类型</th>
                    <th class="px-6 py-3">卡号</th>
                    <th class="px-6 py-3">金额</th>
                    <th class="px-6 py-3">备注</th>
                </tr>
            `);
            if (!transactions || transactions.length === 0) {
                dataTable.innerHTML = `
                    <tr>
                        <td colspan="5" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-search mr-2"></i>未找到交易记录
                        </td>
                    </tr>
                `;
                return;
            }
            dataTable.innerHTML = transactions.map(transaction => `
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">${transaction.tradeDate ? new Date(transaction.tradeDate).toLocaleString() : ''}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${transaction.tradeType}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${transaction.cardID}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${transaction.tradeMoney}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${transaction.remark}</td>
                </tr>
            `).join('');
        }
        
        // 渲染余额查询表单
        function renderBalanceQueryForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">余额查询</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                                        <input type="text" id="balanceCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入银行卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" id="balancePassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入密码">
                                    </div>
                                    <div class="pt-2">
                                        <button id="queryBalanceBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-search mr-2"></i> 查询余额
                                        </button>
                                    </div>
                                    <div id="balanceResult" class="hidden mt-4 p-4 bg-gray-50 rounded-md">
                                        <h4 class="font-medium text-gray-800 mb-2">查询结果</h4>
                                        <p class="text-gray-600">银行卡号: <span id="resultCardId">-</span></p>
                                        <p class="text-xl font-bold text-gray-800 mt-2">余额: <span id="resultBalance">-</span> 元</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            
            // 绑定查询按钮事件
            document.getElementById('queryBalanceBtn').addEventListener('click', async () => {
                const cardId = document.getElementById('balanceCardId').value.trim();
                const password = document.getElementById('balancePassword').value.trim();
                
                if (!cardId || !password) {
                    showToast('提示', '请输入银行卡号和密码', 'warning');
                    return;
                }
                
                try {
                    const response = await fetch(`${API_BASE_URL}/customer/balance`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            cardID: cardId,
                            pass: password
                        })
                    });
                    const data = await response.json();
                    
                    if (response.ok) {
                        document.getElementById('resultCardId').textContent = cardId;
                        document.getElementById('resultBalance').textContent = parseFloat(data.balance).toFixed(2);
                        document.getElementById('balanceResult').classList.remove('hidden');
                        showToast('成功', '余额查询成功', 'success');
                    } else {
                        document.getElementById('balanceResult').classList.add('hidden');
                        showToast('错误', data.error || '查询失败', 'error');
                    }
                } catch (error) {
                    document.getElementById('balanceResult').classList.add('hidden');
                    showToast('错误', '网络错误，请重试', 'error');
                    console.error('查询余额失败:', error);
                }
            });
        }
        
        // 渲染交易查询表单
        function renderTransactionQueryForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">交易查询</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                                        <input type="text" id="transactionCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入银行卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" id="transactionPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入密码">
                                    </div>
                                    <div class="pt-2">
                                        <button id="queryTransactionBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-search mr-2"></i> 查询交易
                                        </button>
                                    </div>
                                    <div id="transactionResult" class="hidden mt-4">
                                        <div class="bg-white rounded-lg shadow-sm p-4">
                                            <h4 class="font-medium text-gray-800 mb-3">交易记录</h4>
                                            <div class="overflow-x-auto">
                                                <table class="min-w-full divide-y divide-gray-200">
                                                    <thead class="bg-gray-50">
                                                        <tr>
                                                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易ID</th>
                                                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易类型</th>
                                                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                                            <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="bg-white divide-y divide-gray-200" id="transactionRecords">
                                                        <!-- 交易记录将动态加载 -->
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="noTransactionRecords" class="py-8 text-center text-gray-500 hidden">
                                                <i class="fa fa-search mr-2"></i>未找到交易记录
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            
            // 绑定查询按钮事件
            document.getElementById('queryTransactionBtn').addEventListener('click', async () => {
                const cardId = document.getElementById('transactionCardId').value.trim();
                const password = document.getElementById('transactionPassword').value.trim();
                
                if (!cardId || !password) {
                    showToast('提示', '请输入银行卡号和密码', 'warning');
                    return;
                }
                
                try {
                    // 先验证密码
                    const cardResponse = await fetch(`${API_BASE_URL}/cards/${cardId}`);
                    const cardData = await cardResponse.json();
                    
                    if (!cardResponse.ok || cardData.pass !== password) {
                        document.getElementById('transactionResult').classList.add('hidden');
                        showToast('错误', '银行卡号或密码错误', 'error');
                        return;
                    }
                    
                    // 获取交易记录
                    const response = await fetch(`${API_BASE_URL}/customer/transactions/${cardId}`);
                    const data = await response.json();
                    
                    if (response.ok) {
                        const recordsContainer = document.getElementById('transactionRecords');
                        const noRecordsMsg = document.getElementById('noTransactionRecords');
                        
                        if (data.data && data.data.length > 0) {
                            recordsContainer.innerHTML = data.data.map(transaction => `
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-3 py-2 whitespace-nowrap">${transaction.tradeID}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">${transaction.tradeType}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">
                                        ${transaction.tradeType === '存款' ? 
                                          `<span class="text-green-600">+${transaction.tradeMoney}</span>` : 
                                          `<span class="text-red-600">-${Math.abs(transaction.tradeMoney)}</span>`}
                                    </td>
                                    <td class="px-3 py-2 whitespace-nowrap">${new Date(transaction.tradeDate).toLocaleString()}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">${transaction.remark}</td>
                                </tr>
                            `).join('');
                            
                            noRecordsMsg.classList.add('hidden');
                        } else {
                            recordsContainer.innerHTML = '';
                            noRecordsMsg.classList.remove('hidden');
                        }
                        
                        document.getElementById('transactionResult').classList.remove('hidden');
                        showToast('成功', '交易记录查询成功', 'success');
                    } else {
                        document.getElementById('transactionResult').classList.add('hidden');
                        showToast('错误', data.error || '查询失败', 'error');
                    }
                } catch (error) {
                    document.getElementById('transactionResult').classList.add('hidden');
                    showToast('错误', '网络错误，请重试', 'error');
                    console.error('查询交易记录失败:', error);
                }
            });
        }
        
        // 渲染存款表单
        function renderDepositForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">存款</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                                        <input type="text" id="depositCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入银行卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" id="depositPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">存款金额</label>
                                        <input type="number" id="depositAmount" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入存款金额">
                                    </div>
                                    <div class="pt-2">
                                        <button id="submitDepositBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-plus-circle mr-2"></i> 确认存款
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            
            // 绑定存款按钮事件
            document.getElementById('submitDepositBtn').addEventListener('click', async () => {
                const cardId = document.getElementById('depositCardId').value.trim();
                const password = document.getElementById('depositPassword').value.trim();
                const amount = parseFloat(document.getElementById('depositAmount').value.trim());
                
                if (!cardId || !password || isNaN(amount) || amount <= 0) {
                    showToast('提示', '请输入有效的银行卡号、密码和存款金额', 'warning');
                    return;
                }
                
                try {
                    const response = await fetch(`${API_BASE_URL}/customer/deposit`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            cardID: cardId,
                            amount: amount,
                            pass: password
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (response.ok) {
                        document.getElementById('depositCardId').value = '';
                        document.getElementById('depositPassword').value = '';
                        document.getElementById('depositAmount').value = '';
                        showToast('成功', '存款成功', 'success');
                    } else {
                        showToast('错误', data.error || '存款失败', 'error');
                    }
                } catch (error) {
                    showToast('错误', '网络错误，请重试', 'error');
                    console.error('存款失败:', error);
                }
            });
        }
        
        // 渲染取款表单
        function renderWithdrawForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">取款</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                                        <input type="text" id="withdrawCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入银行卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" id="withdrawPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">取款金额</label>
                                        <input type="number" id="withdrawAmount" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入取款金额">
                                    </div>
                                    <div class="pt-2">
                                        <button id="submitWithdrawBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-minus-circle mr-2"></i> 确认取款
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            
            // 绑定取款按钮事件
            document.getElementById('submitWithdrawBtn').addEventListener('click', async () => {
                const cardId = document.getElementById('withdrawCardId').value.trim();
                const password = document.getElementById('withdrawPassword').value.trim();
                const amount = parseFloat(document.getElementById('withdrawAmount').value.trim());
                
                if (!cardId || !password || isNaN(amount) || amount <= 0) {
                    showToast('提示', '请输入有效的银行卡号、密码和取款金额', 'warning');
                    return;
                }
                
                try {
                    const response = await fetch(`${API_BASE_URL}/customer/withdraw`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            cardID: cardId,
                            amount: amount,
                            pass: password
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (response.ok) {
                        document.getElementById('withdrawCardId').value = '';
                        document.getElementById('withdrawPassword').value = '';
                        document.getElementById('withdrawAmount').value = '';
                        showToast('成功', '取款成功', 'success');
                    } else {
                        showToast('错误', data.error || '取款失败', 'error');
                    }
                } catch (error) {
                    showToast('错误', '网络错误，请重试', 'error');
                    console.error('取款失败:', error);
                }
            });
        }
        
        // 渲染挂失/解挂表单
        function renderReportCardForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">挂失/解挂</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                                        <input type="text" id="reportCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入银行卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" id="reportPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">操作类型</label>
                                        <div class="flex space-x-4">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="reportAction" value="report" class="form-radio text-primary" checked>
                                                <span class="ml-2 text-gray-700">挂失</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="reportAction" value="cancel" class="form-radio text-primary">
                                                <span class="ml-2 text-gray-700">解挂</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="pt-2">
                                        <button id="submitReportBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-check mr-2"></i> 确认操作
                                        </button>
                                    </div>
                                    <div id="reportResult" class="hidden mt-4 p-4 bg-gray-50 rounded-md">
                                        <h4 class="font-medium text-gray-800 mb-2">操作结果</h4>
                                        <p class="text-gray-600" id="reportResultMsg">-</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            
            // 绑定挂失/解挂按钮事件
            document.getElementById('submitReportBtn').addEventListener('click', async () => {
                const cardId = document.getElementById('reportCardId').value.trim();
                const password = document.getElementById('reportPassword').value.trim();
                const action = document.querySelector('input[name="reportAction"]:checked').value;
                
                if (!cardId || !password) {
                    showToast('提示', '请输入银行卡号和密码', 'warning');
                    return;
                }
                
                try {
                    const response = await fetch(`${API_BASE_URL}/customer/report`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            cardID: cardId,
                            pass: password,
                            action: action
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (response.ok) {
                        document.getElementById('reportCardId').value = '';
                        document.getElementById('reportPassword').value = '';
                        
                        const resultMsg = action === 'report' ? '银行卡已成功挂失' : '银行卡已成功解挂';
                        document.getElementById('reportResultMsg').textContent = resultMsg;
                        document.getElementById('reportResult').classList.remove('hidden');
                        
                        showToast('成功', resultMsg, 'success');
                    } else {
                        showToast('错误', data.error || '操作失败', 'error');
                    }
                } catch (error) {
                    showToast('错误', '网络错误，请重试', 'error');
                    console.error('挂失/解挂失败:', error);
                }
            });
        }
        
        // 渲染修改密码表单
        function renderChangePasswordForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">修改密码</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                                        <input type="text" id="changeCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入银行卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">旧密码</label>
                                        <input type="password" id="oldPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入旧密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                                        <input type="password" id="newPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入新密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                                        <input type="password" id="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请再次输入新密码">
                                    </div>
                                    <div class="pt-2">
                                        <button id="submitChangePasswordBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-key mr-2"></i> 确认修改
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            
            // 绑定修改密码按钮事件
            document.getElementById('submitChangePasswordBtn').addEventListener('click', async () => {
                const cardId = document.getElementById('changeCardId').value.trim();
                const oldPass = document.getElementById('oldPassword').value.trim();
                const newPass = document.getElementById('newPassword').value.trim();
                const confirmPass = document.getElementById('confirmPassword').value.trim();
                
                if (!cardId || !oldPass || !newPass || !confirmPass) {
                    showToast('提示', '请填写所有字段', 'warning');
                    return;
                }
                
                if (newPass !== confirmPass) {
                    showToast('提示', '两次输入的新密码不一致', 'warning');
                    return;
                }
                
                if (newPass === oldPass) {
                    showToast('提示', '新密码不能与旧密码相同', 'warning');
                    return;
                }
                
                try {
                    const response = await fetch(`${API_BASE_URL}/customer/changePassword`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            cardID: cardId,
                            oldPass: oldPass,
                            newPass: newPass
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (response.ok) {
                        document.getElementById('changeCardId').value = '';
                        document.getElementById('oldPassword').value = '';
                        document.getElementById('newPassword').value = '';
                        document.getElementById('confirmPassword').value = '';
                        showToast('成功', '密码修改成功', 'success');
                    } else {
                        showToast('错误', data.error || '修改密码失败', 'error');
                    }
                } catch (error) {
                    showToast('错误', '网络错误，请重试', 'error');
                    console.error('修改密码失败:', error);
                }
            });
        }
        
        // 打开添加模态框
        function openAddModal(module) {
            modalTitle.textContent = module === 'customerManagement' ? '新增客户' : 
                                   module === 'cardManagement' ? '新增银行卡' : 
                                   module === 'savingManagement' ? '新增存款业务' : '新增';
            
            if (module === 'customerManagement') {
                modalBody.innerHTML = `
                    <div class="space-y-4">
                                            <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">客户姓名 <span class="text-red-500">*</span></label>
                            <input type="text" id="addCustomerName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">身份证号 <span class="text-red-500">*</span></label>
                            <input type="text" id="addCustomerPID" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                            <input type="text" id="addCustomerTelephone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">联系地址</label>
                            <input type="text" id="addCustomerAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                        </div>
                    </div>
                `;
            } else if (module === 'cardManagement') {
                modalBody.innerHTML = `
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">客户ID <span class="text-red-500">*</span></label>
                            <input type="text" id="addCardCustomer" placeholder="请输入客户ID" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">存款类型 <span class="text-red-500">*</span></label>
                            <select id="addCardSaving" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                <option value="">请选择存款类型</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">开卡金额 <span class="text-red-500">*</span></label>
                            <input type="number" id="addCardOpenMoney" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">取款密码 <span class="text-red-500">*</span></label>
                            <input type="password" id="addCardPassword" minlength="6" maxlength="6" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                    </div>
                `;
                
                // 加载存款类型列表
                loadSavingsForSelect('addCardSaving');
            } else if (module === 'savingManagement') {
                modalBody.innerHTML = `
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">业务ID <span class="text-red-500">*</span></label>
                            <input type="text" id="addSavingId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">业务名称 <span class="text-red-500">*</span></label>
                            <input type="text" id="addSavingName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">业务描述</label>
                            <textarea id="addSavingDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"></textarea>
                        </div>
                    </div>
                `;
            }
            
            modalData = { module, id: null };
            openModalDialog();
        }
        
        // 打开编辑模态框
        function openEditModal(module, id) {
            modalData = { module, id };
            
            if (module === 'customerManagement') {
                modalTitle.textContent = '编辑客户';
                
                // 加载客户数据
                fetch(`${API_BASE_URL}/customers/${id}`)
                    .then(response => response.json())
                    .then(customer => {
                        modalBody.innerHTML = `
                            <div class="space-y-4">
                                <input type="hidden" id="editCustomerId" value="${customer.customerID}">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">客户姓名 <span class="text-red-500">*</span></label>
                                    <input type="text" id="editCustomerName" value="${customer.customerName}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">身份证号 <span class="text-red-500">*</span></label>
                                    <input type="text" id="editCustomerPID" value="${customer.PID}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                                    <input type="text" id="editCustomerTelephone" value="${customer.telephone || ''}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">联系地址</label>
                                    <input type="text" id="editCustomerAddress" value="${customer.address || ''}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                </div>
                            </div>
                        `;
                        
                        openModalDialog();
                    })
                    .catch(error => {
                        showToast('错误', '加载客户数据失败', 'error');
                        console.error('加载客户数据失败:', error);
                    });
            } else if (module === 'cardManagement') {
                modalTitle.textContent = '编辑银行卡';
                
                // 加载银行卡数据
                fetch(`${API_BASE_URL}/cards/${id}`)
                    .then(response => response.json())
                    .then(card => {
                        modalBody.innerHTML = `
                            <div class="space-y-4">
                                <input type="hidden" id="editCardId" value="${card.cardID}">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">客户姓名 <span class="text-red-500">*</span></label>
                                    <select id="editCardCustomer" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                        <option value="">请选择客户</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">存款类型 <span class="text-red-500">*</span></label>
                                    <select id="editCardSaving" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                        <option value="">请选择存款类型</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">开卡金额 <span class="text-red-500">*</span></label>
                                    <input type="number" id="editCardOpenMoney" value="${card.openMoney}" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">余额</label>
                                    <input type="number" id="editCardBalance" value="${card.balance}" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" disabled>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">取款密码</label>
                                    <input type="password" id="editCardPassword" minlength="6" maxlength="6" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">卡状态</label>
                                    <select id="editCardStatus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                        <option value="正常" ${card.IsReportLoss === '正常' ? 'selected' : ''}>正常</option>
                                        <option value="挂失" ${card.IsReportLoss === '挂失' ? 'selected' : ''}>挂失</option>
                                    </select>
                                </div>
                            </div>
                        `;
                        
                        // 加载客户列表
                        loadCustomersForSelect('editCardCustomer', card.customerID);
                        
                        // 加载存款类型列表
                        loadSavingsForSelect('editCardSaving', card.savingID);
                        
                        openModalDialog();
                    })
                    .catch(error => {
                        showToast('错误', '加载银行卡数据失败', 'error');
                        console.error('加载银行卡数据失败:', error);
                    });
            } else if (module === 'savingManagement') {
                modalTitle.textContent = '编辑存款业务';
                
                // 加载存款业务数据
                fetch(`${API_BASE_URL}/savings/${id}`)
                    .then(response => response.json())
                    .then(saving => {
                        modalBody.innerHTML = `
                            <div class="space-y-4">
                                <input type="hidden" id="editSavingId" value="${saving.savingID}">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">业务ID <span class="text-red-500">*</span></label>
                                    <input type="text" id="editSavingIdInput" value="${saving.savingID}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required disabled>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">业务名称 <span class="text-red-500">*</span></label>
                                    <input type="text" id="editSavingName" value="${saving.savingName}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">业务描述</label>
                                    <textarea id="editSavingDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">${saving.description || ''}</textarea>
                                </div>
                            </div>
                        `;
                        openModalDialog();
                    })
                    .catch(error => {
                        showToast('错误', '加载存款业务数据失败', 'error');
                        console.error('加载存款业务数据失败:', error);
                    });
            }
        }
        
        // 打开模态框
        function openModalDialog() {
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modalContent.classList.remove('scale-95');
            modalContent.classList.add('scale-100');
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭模态框
        function closeModalDialog() {
            modal.classList.add('opacity-0', 'pointer-events-none');
            modalContent.classList.remove('scale-100');
            modalContent.classList.add('scale-95');
            document.body.style.overflow = '';
        }
        
        // 提交模态框表单
        async function submitModalForm() {
            if (!modalData) return;
            
            const { module, id } = modalData;
            let response, data;
            const isEdit = !!id;
            
            try {
                if (module === 'customerManagement') {
                    const payload = {
                        customerName: document.getElementById(isEdit ? 'editCustomerName' : 'addCustomerName').value,
                        PID: document.getElementById(isEdit ? 'editCustomerPID' : 'addCustomerPID').value,
                        telephone: document.getElementById(isEdit ? 'editCustomerTelephone' : 'addCustomerTelephone').value,
                        address: document.getElementById(isEdit ? 'editCustomerAddress' : 'addCustomerAddress').value
                    };
                    
                    if (isEdit) {
                        // 编辑客户
                        response = await fetch(`${API_BASE_URL}/customers/${id}`, {
                            method: 'PUT',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(payload)
                        });
                    } else {
                        // 添加客户
                        response = await fetch(`${API_BASE_URL}/customers`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(payload)
                        });
                    }
                } else if (module === 'cardManagement') {
                    const payload = {
                        customerID: document.getElementById(isEdit ? 'editCardCustomer' : 'addCardCustomer').value,
                        savingID: document.getElementById(isEdit ? 'editCardSaving' : 'addCardSaving').value,
                        openMoney: parseFloat(document.getElementById(isEdit ? 'editCardOpenMoney' : 'addCardOpenMoney').value),
                        pass: document.getElementById(isEdit ? 'editCardPassword' : 'addCardPassword').value,
                    };

                    if (isEdit) {
                        // 编辑银行卡
                        payload.balance = parseFloat(document.getElementById('editCardBalance').value);
                        payload.IsReportLoss = document.getElementById('editCardStatus').value;
                        if (!payload.pass) delete payload.pass; // 如果密码为空则不更新

                        response = await fetch(`${API_BASE_URL}/cards/${id}`, {
                            method: 'PUT',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(payload)
                        });
                    } else {
                        // 添加银行卡
                        payload.balance = payload.openMoney;
                        payload.IsReportLoss = '正常';
                        response = await fetch(`${API_BASE_URL}/cards`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(payload)
                        });
                    }
                } else if (module === 'savingManagement') {
                    const payload = isEdit ? {
                        savingName: document.getElementById('editSavingName').value,
                        description: document.getElementById('editSavingDescription').value
                    } : {
                        savingID: document.getElementById('addSavingId').value,
                        savingName: document.getElementById('addSavingName').value,
                        description: document.getElementById('addSavingDescription').value
                    };
                    if (isEdit) {
                        // 编辑存款业务
                        response = await fetch(`${API_BASE_URL}/savings/${id}`, {
                            method: 'PUT',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(payload)
                        });
                    } else {
                        // 添加存款业务
                        response = await fetch(`${API_BASE_URL}/savings`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(payload)
                        });
                    }
                }

                if (response) {
                    data = await response.json();
                    if (response.ok) {
                        closeModalDialog();
                        showToast('成功', isEdit ? '信息更新成功' : '添加成功', 'success');
                        loadModuleData(module);
                        loadStatistics(); // 刷新统计数据
                    } else {
                        showToast('错误', data.error || '操作失败', 'error');
                    }
                }
            } catch (error) {
                closeModalDialog();
                showToast('错误', '网络错误，请重试', 'error');
                console.error('提交表单失败:', error);
            }
        }
        
        // 删除项目
        async function deleteItem(module, id) {
            if (!confirm('确定要删除此项目吗？此操作不可撤销。')) return;
            
            try {
                let response;
                
                if (module === 'customerManagement') {
                    response = await fetch(`${API_BASE_URL}/customers/${id}`, {
                        method: 'DELETE'
                    });
                } else if (module === 'cardManagement') {
                    response = await fetch(`${API_BASE_URL}/cards/${id}`, {
                        method: 'DELETE'
                    });
                } else if (module === 'savingManagement') {
                    response = await fetch(`${API_BASE_URL}/savings/${id}`, {
                        method: 'DELETE'
                    });
                }
                
                if (response && response.ok) {
                    showToast('成功', '删除成功', 'success');
                    loadModuleData(module);
                    loadStatistics(); // 刷新统计数据
                } else {
                    const data = await response.json();
                    showToast('错误', data.error || '删除失败', 'error');
                }
            } catch (error) {
                showToast('错误', '网络错误，请重试', 'error');
                console.error('删除失败:', error);
            }
        }
        
        // 加载客户列表用于下拉选择
        async function loadCustomersForSelect(selectId, selectedId = null) {
            try {
                const response = await fetch(`${API_BASE_URL}/customers?pageSize=1000`);
                const data = await response.json();
                
                const selectElement = document.getElementById(selectId);
                selectElement.innerHTML = '<option value="">请选择客户</option>';
                
                data.data.forEach(customer => {
                    const option = document.createElement('option');
                    option.value = customer.customerID;
                    option.textContent = customer.customerName;
                    if (selectedId === customer.customerID) {
                        option.selected = true;
                    }
                    selectElement.appendChild(option);
                });
            } catch (error) {
                console.error('加载客户列表失败:', error);
            }
        }
        
        // 加载存款类型列表用于下拉选择
        async function loadSavingsForSelect(selectId, selectedId = null) {
            try {
                const response = await fetch(`${API_BASE_URL}/savings`);
                const data = await response.json();
                
                const selectElement = document.getElementById(selectId);
                selectElement.innerHTML = '<option value="">请选择存款类型</option>';
                
                data.data.forEach(saving => {
                    const option = document.createElement('option');
                    option.value = saving.savingID;
                    option.textContent = saving.savingName;
                    if (selectedId === saving.savingID) {
                        option.selected = true;
                    }
                    selectElement.appendChild(option);
                });
            } catch (error) {
                console.error('加载存款类型列表失败:', error);
            }
        }
        
        // 更新分页
        function updatePagination(total, pageSize) {
            totalPages = Math.ceil(total / pageSize);
            const start = (currentPage - 1) * pageSize + 1;
            const end = Math.min(currentPage * pageSize, total);
            
            startIndex.textContent = start;
            endIndex.textContent = end;
            totalItems.textContent = total;
            
            // 更新页码按钮
            pageNumbers.innerHTML = '';
            
            // 显示页码范围
            const visiblePages = 5;
            let startPage = Math.max(1, currentPage - Math.floor(visiblePages / 2));
            let endPage = Math.min(totalPages, startPage + visiblePages - 1);
            
            // 调整起始页如果结束页超过总页数
            if (endPage - startPage < visiblePages - 1) {
                startPage = Math.max(1, endPage - visiblePages + 1);
            }
            
            // 添加页码按钮
            for (let i = startPage; i <= endPage; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.textContent = i;
                pageBtn.classList.add('px-3', 'py-1', 'border', 'border-gray-300', 'rounded-md', 'text-gray-600', 'hover:bg-gray-50');
                
                if (i === currentPage) {
                    pageBtn.classList.add('bg-primary', 'text-white', 'border-primary');
                }
                
                pageBtn.addEventListener('click', () => {
                    currentPage = i;
                    loadModuleData(currentModule);
                });
                
                pageNumbers.appendChild(pageBtn);
            }
            
            // 更新上一页和下一页按钮状态
            prevPage.disabled = currentPage === 1;
            nextPage.disabled = currentPage === totalPages;
        }
        
        // 显示提示消息
        function showToast(title, message, type = 'success') {
            toastTitle.textContent = title;
            toastMessage.textContent = message;
            
            if (type === 'success') {
                toastIcon.className = 'w-8 h-8 rounded-full flex items-center justify-center bg-green-500 text-white';
                toastIcon.innerHTML = '<i class="fa fa-check"></i>';
            } else if (type === 'error') {
                toastIcon.className = 'w-8 h-8 rounded-full flex items-center justify-center bg-red-500 text-white';
                toastIcon.innerHTML = '<i class="fa fa-times"></i>';
            } else if (type === 'warning') {
                toastIcon.className = 'w-8 h-8 rounded-full flex items-center justify-center bg-yellow-500 text-white';
                toastIcon.innerHTML = '<i class="fa fa-exclamation-triangle"></i>';
            }
            
            // 显示提示
            toast.classList.remove('translate-y-16', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
            
            // 3秒后隐藏提示
            setTimeout(() => {
                toast.classList.add('translate-y-16', 'opacity-0');
                toast.classList.remove('translate-y-0', 'opacity-100');
            }, 3000);
        }

        // 渲染报表导出表单
        function renderReportExportForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">报表导出</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">报表类型</label>
                                        <select id="reportType" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                            <option value="card-transactions">银行卡月交易额统计</option>
                                            <option value="month-summary">月末汇总</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">月份（格式：2024-06）</label>
                                        <input type="month" id="reportMonth" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                    </div>
                                    <div class="pt-2">
                                        <button id="exportReportBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow hover:shadow-md flex items-center justify-center">
                                            <i class="fa fa-download mr-2"></i> 导出CSV
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;

            document.getElementById('exportReportBtn').addEventListener('click', async () => {
                const type = document.getElementById('reportType').value;
                const month = document.getElementById('reportMonth').value;
                let url = `${API_BASE_URL}/reports/export?type=${type}`;
                if (month) url += `&month=${month}`;
                try {
                    const response = await fetch(url);
                    if (!response.ok) {
                        const errorData = await response.json();
                        throw new Error(errorData.error || '导出失败');
                    }
                    const blob = await response.blob();
                    const a = document.createElement('a');
                    a.href = window.URL.createObjectURL(blob);
                    a.download = `${type}-${month || 'all'}.csv`;
                    a.click();
                    showToast('成功', '报表已开始导出', 'success');
                } catch (error) {
                    showToast('错误', `导出报表失败: ${error.message}`, 'error');
                }
            });
        }

        // 渲染转账表单
        function renderTransferForm() {
            dataTable.innerHTML = `
                <tr>
                    <td colspan="6" class="px-6 py-8">
                        <div class="max-w-md mx-auto">
                            <div class="bg-white rounded-lg shadow-md p-6">
                                <h3 class="text-lg font-semibold mb-4">转账</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">转出卡号</label>
                                        <input type="text" id="fromCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="请输入转出卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" id="fromCardPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="请输入密码">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">收款卡号</label>
                                        <input type="text" id="toCardId" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="请输入收款卡号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">转账金额</label>
                                        <input type="number" id="transferAmount" min="0.01" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="请输入转账金额">
                                    </div>
                                    <div class="pt-2">
                                        <button id="submitTransferBtn" class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 flex items-center justify-center">
                                            <i class="fa fa-exchange mr-2"></i> 确认转账
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
            document.getElementById('submitTransferBtn').addEventListener('click', async () => {
                const fromCardId = document.getElementById('fromCardId').value.trim();
                const fromCardPassword = document.getElementById('fromCardPassword').value.trim();
                const toCardId = document.getElementById('toCardId').value.trim();
                const amount = parseFloat(document.getElementById('transferAmount').value.trim());
                if (!fromCardId || !fromCardPassword || !toCardId || isNaN(amount) || amount <= 0) {
                    showToast('提示', '请填写所有字段且金额大于0', 'warning');
                    return;
                }
                try {
                    const response = await fetch(`${API_BASE_URL}/customer/transfer`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            fromCardID: fromCardId,
                            toCardID: toCardId,
                            amount: amount,
                            pass: fromCardPassword
                        })
                    });
                    const data = await response.json();
                    if (response.ok) {
                        showToast('成功', '转账成功', 'success');
                        document.getElementById('fromCardId').value = '';
                        document.getElementById('fromCardPassword').value = '';
                        document.getElementById('toCardId').value = '';
                        document.getElementById('transferAmount').value = '';
                    } else {
                        showToast('错误', data.error || '转账失败', 'error');
                    }
                } catch (error) {
                    showToast('错误', '网络错误，请重试', 'error');
                }
            });
        }
    </script>
</body>
</html>